<template>
    <view class="container">
        <view v-if="product">
            <view class="thumb" v-if="product.products.thumbs_text">
                <image mode="aspectFill" :src="product.products.thumbs_text" />
            </view>

            <view class="info">
                <view class="validate">
                    <view class="icon">
                        <image src="/static/images/validate_active.png"></image>
                    </view>
                    <view class="txt">
                        您查询的产品是官方正品! <view>请放心使用！</view>
                    </view>
                </view>

                <view class="line"></view>

                <view class="list">
                    <view class="item">
                        <view class="name">查询次数：</view>
                        <view class="value">{{ product.query_num }}</view>
                    </view>

                    <view class="item">
                        <view class="name">您查询的防伪码：</view>
                        <view class="value">{{ product.query_code }}</view>
                    </view>

                    <view class="item">
                        <view class="name">首次查询时间：</view>
                        <view class="value">{{ product.query_time_text }}</view>
                    </view>

                    <view class="item">
                        <view class="name">防伪码所属产品：</view>
                        <view class="value">{{ product.products.name }}</view>
                    </view>
                </view>

                <view class="code" v-if="product.query_qrcord">
                    <image mode="aspectFit" show-menu-by-longpress :src="product.query_qrcord_text" />
                </view>

                <view class="action" v-if="business.id == product.busid">
                    <u-button @click="show = true" type="success" text="更换防伪码"></u-button>
                </view>
            </view>
        </view>

        <view v-else>
            <u-empty mode="data"></u-empty>
        </view>


        <!-- 提醒组件 -->
        <u-toast ref="notice" />

        <!-- 模态框 -->
        <u-modal :show="show" :content='content' showCancelButton @confirm="ModalConfirm"
            @cancel="show = false"></u-modal>
    </view>
</template>

<script>
export default {
    onLoad(options) {
        this.code = options.code ? options.code : ''

        if (!this.code) {
            this.$refs.notice.show({
                type: 'error',
                message: '授权码为空无法查询'
            })
            return false
        }

        //获取本地存储
        var business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {}

        // 判断对象是否为空
        if (Object.getOwnPropertyNames(business).length > 0) this.business = business

        this.Info()
    },
    data() {
        return {
            code: '',
            product: null,
            business: {},
            show: false,
            content: '是否更换防伪码'
        }
    },
    methods: {
        async Info() {
            var result = await uni.$u.http.post('/business/validator', { code: this.code })

            if (result.code == 0) {
                this.$refs.notice.show({
                    type: 'error',
                    message: result.msg
                })
                return false;
            }

            this.product = result.data
        },
        async ModalConfirm() {
            this.show = false

            var result = await uni.$u.http.post('/business/generate', { code: this.code })

            if (result.code == 0) {
                this.$refs.notice.show({
                    type: 'error',
                    message: result.msg
                })
                return false
            }

            //替换数据
            this.product = result.data
        }
    }
}
</script>

<style>
page {
    background-color: #eee;
    padding-bottom: 10px;
}

.container {
    width: 95%;
    margin: 0 auto;
}

.thumb {
    width: 100%;
    height: 280px;
    border-radius: 10px;
    overflow: hidden;
}

.thumb image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.info {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
    padding: 0 10px 10px;
}

.info .validate {
    display: flex;
    align-items: center;
    padding: 10px 0 10px 10px;
}

.info .validate image {
    width: 50px;
    height: 50px;
    margin-right: 10px;
}

.info .validate .txt {
    font-size: 14px;
}

.info .validate .txt view {
    font-size: 12px;
    color: #9b9b9a;
    margin-top: 5px;
}

.info .line {
    width: 100%;
    height: 1px;
    background: #ebebeb;
    margin: 0 auto;
    margin-bottom: 10px;
}

.info .list .item {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 10px;
}

.info .list .item .name {
    color: #9b9b9a;
}

.info .code {
    width: 100%;
    height: 280px;
}

.info .code image {
    width: 100%;
    height: 100%;
}

.action {
    width: 40%;
    margin: 0 auto;
    margin-top: 10px;
}
</style>